<template>
  <div class="fresh-login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="leaf-decoration leaf-1"></div>
      <div class="leaf-decoration leaf-2"></div>
      <div class="leaf-decoration leaf-3"></div>
      <div class="nature-pattern"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <!-- 头部装饰图像 -->
      <div class="login-header">
        <div class="nature-icon">
          <svg viewBox="0 0 100 100" class="plant-icon">
            <path d="M50 90 Q30 70 30 50 Q30 30 50 10 Q70 30 70 50 Q70 70 50 90" fill="#52b573" opacity="0.8" />
            <circle cx="50" cy="50" r="8" fill="#7dd89b" />
          </svg>
        </div>
        <h1 class="login-title">系统登录</h1>
        <p class="login-subtitle">清新自然 · 安全可靠</p>
      </div>

      <!-- 登录表单 -->
      <el-form ref="ruleFormRef" class="login-form" :model="ruleForm" :rules="rules" label-width="0" size="large">

        <el-form-item prop="userName" class="form-item">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户名" class="form-input">
            <template #prefix>
              <el-icon class="input-icon">
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="userPass" class="form-item">
          <el-input v-model="ruleForm.userPass" type="password" placeholder="请输入密码" class="form-input" show-password>
            <template #prefix>
              <el-icon class="input-icon">
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="yzm" class="form-item">
          <div class="captcha-row">
            <el-input v-model="ruleForm.yzm" placeholder="验证码" class="form-input captcha-input">
              <template #prefix>
                <el-icon class="input-icon">
                  <Key />
                </el-icon>
              </template>
            </el-input>
            <div class="captcha-box">
              <span class="captcha-text">{{ ruleForm.scyzm }}</span>
              <button type="button" @click="scyzm1" class="refresh-btn">
                <el-icon>
                  <Refresh />
                </el-icon>
              </button>
            </div>
          </div>
        </el-form-item>

        <div class="form-actions">
          <el-button type="primary" @click="submitForm(ruleFormRef)" class="login-button" size="large">
            <el-icon class="btn-icon">
              <Right />
            </el-icon>
            登录
          </el-button>
          <el-button @click="resetForm(ruleFormRef)" class="reset-button" size="large">
            <el-icon class="btn-icon">
              <RefreshLeft />
            </el-icon>
            重置
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { User, Lock, Key, Refresh, Right, RefreshLeft } from '@element-plus/icons-vue'
import axios from 'axios'
import { useCounterStore } from '@/stores/counter'
import router from '@/router'
const store = useCounterStore()


onMounted(() => {
  scyzm1()
})

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  userName: '',
  userPass: '',
  scyzm: '',
  yzm: ''
})



const scyzm1 = () => {
  var aa = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"
  var num = ""
  for (var i = 1; i <= 4; i++) {
    var index = Math.floor(Math.random() * aa.length);
    num += aa[index]
  }
  ruleForm.scyzm = num
}


const rules = reactive<FormRules>({
  userName: [
    { required: true, message: '用户名不为空', trigger: 'blur' },
  ],
  userPass: [
    { required: true, message: '密码不为空', trigger: 'blur' },
  ],
  yzm: [
    { required: true, message: '验证码不为空', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (ruleForm.scyzm != ruleForm.yzm) {
      ElMessage.error("验证码不匹配，请重新输入")
      return
    }
    axios({
      url: 'http://59.110.123.186:4405/api/Management/Login',
      method: 'get',
      params: {
        userName: ruleForm.userName,
        userPass: ruleForm.userPass
      }
    })
      .then(res => {
        if (res.data.code == 100) {
          ElMessage.success(res.data.message)

          store.userInfo.id = res.data.data.id
          store.userInfo.userName = res.data.data.userName
          store.userInfo.userLickname = res.data.data.userLickname
          store.userInfo.roleId = res.data.data.roleId
          store.userInfo.roleName = res.data.data.roleName

          // 登录判定
          // 登录成功，写JWT的 token到本地
          window.localStorage.setItem("token", res.data.token);
          // 数据提交后端要加入新的Token值
          axios.defaults.headers.common["Authorization"] =
            "Bearer " + res.data.token;
          router.push('/Main');
        }
        else {
          ElMessage.error(res.data.message)
          return
        }
      })
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style scoped>
/* 清新浅绿色登录页面样式 */
.fresh-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fdf8 0%, #e8f5e8 100%);
  position: relative;
  padding: 2rem;
  overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.nature-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(82, 181, 115, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(125, 216, 155, 0.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2352b573' fill-opacity='0.03'%3E%3Cpath d='M40 40c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm20 0c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.leaf-decoration {
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(82, 181, 115, 0.1);
  border-radius: 50% 0 50% 0;
  animation: leafFloat 8s ease-in-out infinite;
}

.leaf-1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
  transform: rotate(45deg);
}

.leaf-2 {
  top: 60%;
  right: 15%;
  animation-delay: 2s;
  transform: rotate(-30deg);
}

.leaf-3 {
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
  transform: rotate(15deg);
  width: 80px;
  height: 80px;
}

@keyframes leafFloat {

  0%,
  100% {
    transform: translateY(0) rotate(var(--rotation, 0deg));
    opacity: 0.6;
  }

  50% {
    transform: translateY(-15px) rotate(calc(var(--rotation, 0deg) + 10deg));
    opacity: 0.8;
  }
}

/* 登录卡片 */
.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 3rem;
  box-shadow:
    0 20px 40px rgba(82, 181, 115, 0.15),
    0 10px 20px rgba(82, 181, 115, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(82, 181, 115, 0.2);
  position: relative;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #52b573, #7dd89b, #a8e6a3);
}

/* 头部区域 */
.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.nature-icon {
  margin-bottom: 1.5rem;
}

.plant-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 8px rgba(82, 181, 115, 0.2));
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.login-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #2d5d31;
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
}

.login-subtitle {
  color: #52b573;
  font-size: 0.95rem;
  margin: 0;
  font-weight: 500;
}

/* 表单样式 */
.login-form {
  width: 100%;
}

.form-item {
  margin-bottom: 1.5rem;
}

.form-input :deep(.el-input__wrapper) {
  background: rgba(248, 253, 248, 0.8);
  border: 2px solid rgba(82, 181, 115, 0.2);
  border-radius: 16px;
  padding: 0 16px;
  height: 56px;
  box-shadow:
    inset 0 2px 4px rgba(82, 181, 115, 0.05),
    0 2px 8px rgba(82, 181, 115, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input :deep(.el-input__wrapper:hover) {
  border-color: rgba(82, 181, 115, 0.4);
  box-shadow:
    inset 0 2px 4px rgba(82, 181, 115, 0.1),
    0 4px 12px rgba(82, 181, 115, 0.15);
}

.form-input :deep(.el-input__wrapper.is-focus) {
  border-color: #52b573;
  box-shadow:
    inset 0 2px 4px rgba(82, 181, 115, 0.1),
    0 0 0 4px rgba(82, 181, 115, 0.15);
}

.form-input :deep(.el-input__inner) {
  color: #2d5d31;
  font-size: 1rem;
  font-weight: 500;
}

.form-input :deep(.el-input__inner::placeholder) {
  color: rgba(45, 93, 49, 0.5);
}

.input-icon {
  color: #52b573;
  font-size: 1.2rem;
}

/* 验证码行 */
.captcha-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.captcha-input {
  flex: 1;
}

.captcha-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
}

.captcha-text {
  background: linear-gradient(135deg, #f8fdf8, #e8f5e8);
  border: 2px solid #52b573;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #2d5d31;
  letter-spacing: 4px;
  text-align: center;
  font-family: 'Courier New', monospace;
  user-select: none;
  box-shadow:
    inset 0 2px 4px rgba(82, 181, 115, 0.1),
    0 2px 8px rgba(82, 181, 115, 0.15);
  min-width: 100px;
}

.refresh-btn {
  background: rgba(82, 181, 115, 0.1);
  border: 1px solid rgba(82, 181, 115, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  color: #52b573;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.refresh-btn:hover {
  background: rgba(82, 181, 115, 0.2);
  border-color: #52b573;
  transform: translateY(-1px);
}

/* 按钮区域 */
.form-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.login-button {
  background: linear-gradient(135deg, #52b573, #7dd89b);
  border: none;
  border-radius: 16px;
  padding: 0 2rem;
  height: 56px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  box-shadow:
    0 4px 12px rgba(82, 181, 115, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-width: 140px;
}

.login-button:hover {
  background: linear-gradient(135deg, #7dd89b, #a8e6a3);
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(82, 181, 115, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.login-button:active {
  transform: translateY(0);
}

.reset-button {
  background: rgba(248, 253, 248, 0.8);
  border: 2px solid rgba(82, 181, 115, 0.3);
  border-radius: 16px;
  padding: 0 2rem;
  height: 56px;
  color: #52b573;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 140px;
}

.reset-button:hover {
  background: rgba(82, 181, 115, 0.1);
  border-color: #52b573;
  color: #2d5d31;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 181, 115, 0.2);
}

.btn-icon {
  margin-right: 8px;
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .fresh-login-container {
    padding: 1rem;
  }

  .login-card {
    padding: 2rem;
    max-width: 100%;
    border-radius: 20px;
  }

  .login-title {
    font-size: 1.8rem;
  }

  .plant-icon {
    width: 60px;
    height: 60px;
  }

  .captcha-row {
    flex-direction: column;
    gap: 1rem;
  }

  .captcha-box {
    flex-direction: row;
    justify-content: center;
    min-width: auto;
  }

  .form-actions {
    flex-direction: column;
  }

  .login-button,
  .reset-button {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .login-title {
    font-size: 1.6rem;
  }

  .login-subtitle {
    font-size: 0.9rem;
  }

  .captcha-text {
    font-size: 1.1rem;
    letter-spacing: 3px;
    padding: 10px 16px;
  }

  .form-input :deep(.el-input__wrapper) {
    height: 50px;
    border-radius: 14px;
  }

  .login-button,
  .reset-button {
    height: 50px;
    border-radius: 14px;
  }
}
</style>